<script>
  import ShowHide from './pages/ShowHide.vue'
  import Tab from './pages/Tab.vue'
  import PubCommens from './pages/PubCommens.vue'
  import ReactiveState from './pages/ReactiveState.vue'
  import List from './pages/List.vue'
  import PiniaState from './pages/PiniaState.vue'
  import Collspase from './components/Collspase.vue'
  import CollapasePannel from './components/CollapasePannel.vue'

  import store from './store/store.js'

  import { reactive, ref,toRefs } from 'vue';

  export default {
    components: {
      ShowHide,
      Tab,
      PubCommens,
      ReactiveState,
      List,
      PiniaState,
      Collspase,
      CollapasePannel
    },
    setup(props, context) {
      const fruite_arr = reactive([
        '苹果',
        '香蕉',
        '葡萄',
        '火龙果'
      ])

      // 处理子组件发送过来的信息，接收子组件传递过来的数据
      const childData = ref(0);

      const handleChildMsg = (data) => {
        console.log('来自子组件的数据', data)
        childData.value = data;
      }

      // 面板
      const pannel_active = ref(1);
      let pannel_active_arr = ref(
        [
          true, 
          false,
          false
        ]
      )

      const handleChangeActive = (num)=>{
        console.log("收到子组件的事件:"+num)
        pannel_active.value = num;

        let arr = pannel_active_arr.value.map((v,k)=>{
          if(num - 1 == k){
              v=!v;
          }else{
              v=false //关闭其它
          }
          return v;
        })
        pannel_active_arr.value = arr;
      }

      return {
        store,
        fruite_arr,
        handleChildMsg,
        childData,

        pannel_active,
        handleChangeActive,
        pannel_active_arr
      }
    }
  }
</script>

<template>

  <div>
    <h2>1.关闭广告</h2>
    <ShowHide></ShowHide>

    <h2>2.标签页</h2>
    <Tab></Tab>

    <h2>3.发布评论</h2>
    <PubCommens></PubCommens>

     <h2>4. reactive函数实现简单状态管理-夸组件通信</h2>
    <ReactiveState></ReactiveState>
    <p>在App组件中使用：{{store.count}}</p>

     <h2>5. 单状态管理-父子组件通信</h2>
    <!-- 父子传值01：绑定属性 -->
    <List :data="fruite_arr" title="父到子传值：来自父组件的数据" @revice-data="handleChildMsg"></List>
    、父组件：接收来自子组件中的数据：{{childData}}

    <br>
    <p>

      总结：
      1. Vue3中 父子 组件 之间传递数据（通信）思路同Vue2.但是注意因使用方法还是有有差异。
      因为组合式API 默认是setup函数,但是setup函数又有简写形式( script setup )、使用TypeScipt
      后还可以指定类型，所以就需要一些其它配置或写法。
      <br>
      2.所以Vue3中涉及到props、emite的时候，实际上有3种写法，总结如下
      A.setup函数
      B.setup函数语法糖 script setup
      C.使用ts后的写法
    </p> 

    <h2>6. 状态管理库-pinia</h2>
    <PiniaState></PiniaState>

    <h2>7.Collspase/手风琴</h2>
    
    <Collspase :active_index="pannel_active">

      <CollapasePannel 
        title="水果" 
        :is_open="pannel_active_arr[0]"
        @changeActive="handleChangeActive(1)" 
      >
        <p>面板内容1</p>
        <p>面板内容</p>
        <p>面板内容</p>
      </CollapasePannel>

      <CollapasePannel 
        title="饮料" 
        @changeActive="handleChangeActive(2)" 
        :is_open="pannel_active_arr[1]"
      >
        <p>面板内容2</p>
        <p>面板内容</p>
        <p>面板内容</p>
      </CollapasePannel>

      <CollapasePannel 
        title="零食" 
        @changeActive="handleChangeActive(3)" 
        :is_open="pannel_active_arr[2]"
      >
        <p>面板内容3</p>
        <p>面板内容</p>
        <p>面板内容</p>
      </CollapasePannel>

    </Collspase>

  </div>
</template>

<style scoped>

</style>